<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cs" width="600px" height="600px" style="margin: 0 auto;">
        送给儿子的一幅画
    </canvas>
    <script>
        var c1 = document.getElementById('cs')
        var c1x = c1.getContext('2d')
        c1x.fillRect(100,100,300,300)
        c1x.strokeRect(200,200,300,300)
        let height = 0;
        let t1 = setInterval(()=>{
            height++;
           
            c1x.clearRect(0,0,c1.clientWidth,height);
            if(height > c1.height ){
                clearInterval(t1)
            }
        },100)
        c1x.arc(50,50,20,0,Math.PI*2)
        c1x.fill()
    </script>
</body>
</html>